<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="vue.min.js"></script>
</head>
<body>

	<div id="app">
		
		<input type="text" name="" v-model="n1">
		<select name="" v-model="opt">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>		
		</select>
		<input type="text" name="" v-model="n2">
	
    	<!-- <input type="button" value="=" @click="calc"> -->

    	<button @click="calc">=</button>


		<input type="text" name="" v-model="result">

	</div>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				n1: 0,
				n2: 0,
				result: 0,
				opt: '+'
			},
			methods: {
				calc(){
					// var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
					// this.result = eval(codeStr);
					switch (this.opt) {
						case '+':
							this.result = parseInt(this.n1) + parseInt(this.n2);
							break;
						case '-':
							this.result = parseInt(this.n1) - parseInt(this.n2);
							break;
						case '*':
							this.result = parseInt(this.n1) * parseInt(this.n2);
							break;
						case '/':
							this.result = parseInt(this.n1) / parseInt(this.n2);
							break;
					}
					
				}
			}

		});



	</script>
</body>
</html>